<template>
	<pro-table
		ref="protable"
		rowKey="menuId"
		:loadDataUrl="api.getList"
		:showPagination="false"
		:columns="columns"
		:isRowSelection="false"
		:isAdd="$_has('sys:menuWc:insert')"
		@addRecord="addRecord"
		@showDeleteConfirm="showDeleteConfirm"
		@setTableData="setTableData"
	>
		<a-tag :color="text | filterB" slot="type" slot-scope="{ text, record }">{{ text | filterA }}</a-tag>
		<i class="menu-icon iconfont" slot="icon" slot-scope="{ text, record }" :class="'icon-' + text"></i>
		<span slot="operation" slot-scope="{ text, record }" class="operation">
			<a href="javascript:;" v-has="'sys:menu:update'" title="编辑" class="edit" @click="editRecord(record)">编辑</a>
			<a href="javascript:;" v-has="'sys:menuWc:insert'" title="新增" class="add" @click="handleAddSub(record.menuId)">新增</a>
			<a href="javascript:;" v-has="'sys:menuWc:delete'" title="删除" class="del" @click="showDeleteConfirm(1, record.menuId, record.name)">删除</a>
		</span>
		<!-- 权限 -->
		<!-- 添加，编辑  -->
		<mini-menu-list-modal :api="api" modalTitle="菜单" ref="addOrEditModal" @ok="handlerRefresh" :MenuTree="menuTree"></mini-menu-list-modal>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins';
import { sysManageapi } from '@/api/index.js';
import miniMenuListModal from './module/miniMenuListModal';
const columns = [
	{
		title: '名称',
		dataIndex: 'name',
		key: 'name',
		width: '20%',
		ellipsis: true
	},
	{
		title: '类型',
		dataIndex: 'type',
		width: '10%',
		key: 'type',
		scopedSlots: {
			customRender: 'type'
		}
	},
	{
		title: '权限标识',
		dataIndex: 'perms',
		width: '30%',
		key: 'perms',
		ellipsis: true
	},
	{
		title: '操作',
		key: 'operation',
		dataIndex: 'operation',
		scopedSlots: {
			customRender: 'operation'
		},
		// align: 'center',
		width: '10%'
		// fixed: 'right'
	}
];
export default {
	name: 'minmenulist',
	mixins: [rowSelection, recordOperation],
	components: {
		miniMenuListModal
	},
	data() {
		return {
			columns: columns,
			filter: {},
			api: sysManageapi.minimenuUrl,
			menuTree: []
		};
	},
	created() {},
	methods: {
		handleAddSub(menuId) {
			this.$refs.addOrEditModal.add({
				parentId: menuId
			});
		},
		editMenuList(record) {
			this.$refs.menuListModal.edit(record);
		},
		setTableData(menu) {
			this.menuTree = [...menu];
		}
	},
	filters: {
		filterA: function(value) {
			if (value == 0) {
				return '页面';
			}
			if (value == 1) {
				return '模块';
			}
			if (value == 2) {
				return '按钮';
			}
		},
		filterB: function(value) {
			if (value == 0) {
				return '#337AB7';
			} else if (value == 1) {
				return '#47BC47';
			}
			if (value == 2) {
				return '#F0AD4E';
			}
		}
	}
};
</script>

<style scoped="scoped" lang="less"></style>
